<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('红色书籍列表')" />
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>书籍标题：</label>
                  <input type="text" name="title" />
                </li>
                <li>
                  <label>作者：</label>
                  <input type="text" name="author" />
                </li>
                <li>
                  <label>出版社：</label>
                  <input type="text" name="publisher" />
                </li>
                <li>
                  <label>出版日期：</label>
                  <input
                    type="text"
                    class="time-input"
                    placeholder="请选择出版日期"
                    name="publishDate"
                  />
                </li>
                <li>
                  <label>阅读次数：</label>
                  <input type="text" name="readCount" />
                </li>
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="$.table.search()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="$.form.reset()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="learn:redBook:add"
          >
            <i class="fa fa-plus"></i> 添加
          </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
          <table id="bootstrap-table"></table>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script
      th:src="@{/ajax/libs/qrcode/jquery.qrcode.min.js?v=1.24.1}"
    ></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ruoyi/js/study-time-recorder.js}"></script>
    <script th:inline="javascript">
              var editFlag = [[${@permission.hasPermi('learn:redBook:edit')}]];
              var removeFlag = [[${@permission.hasPermi('learn:redBook:remove')}]];
              var prefix = ctx + "learn/redBook";

            // 页面加载完成后自动开始记录学习时长
            $(document).ready(function () {
              console.log("页面加载完成，开始记录学习时长");
              // 开始记录学习视频模块的学习时长（模块级记录）
              StudyTimeRecorder.start("book", 0);
            });

            // 页面卸载时触发
            window.addEventListener("unload", function (event) {
              console.log("unload 事件触发，结束学习记录");
              StudyTimeRecorder.end(true);
            });
              $(function() {
      <!--            jQuery('#qrcodeCanvas').qrcode({-->
      <!--              text	: "http://www.runoob.com"-->
      <!--            });-->
                  var options = {
                      url: prefix + "/list",
                      createUrl: prefix + "/add",
                      updateUrl: prefix + "/edit/{id}",
                      removeUrl: prefix + "/remove",
                      exportUrl: prefix + "/export",
                      modalName: "红色书籍",
                      onLoadSuccess: function(data) {
                          // 数据加载成功后执行的函数
                          initQrcode();
                      },
                      columns: [{
                          checkbox: true
                      },
                      {
                          field: 'id',
                          title: '书籍ID',
                          visible: false
                      },
                      {
                          field: 'title',
                          title: '书籍标题'
                      },
                      {
                          field: 'author',
                          title: '作者'
                      },
                      {
                          field: 'publisher',
                          title: '出版社'
                      },
                      {
                          field: 'publishDate',
                          title: '出版日期'
                      },
                      {
                          field: 'coverUrl',
                          title: '封面图片URL',
                          formatter: function(value, row, index) {
                            return $.table.imageView(ctx + value);
                          }
                      },
                      {
                          field: 'bookUrl',
                          title: '电子书',
                          formatter: function(value, row, index) {
                              if (!value) {
                                  return '<span class="text-muted">无电子书</span>';
                              }

                              // 获取文件扩展名
                              var ext = value.split('.').pop().toLowerCase();

                              if (ext === 'pdf') {
                                  // PDF文件，提供预览按钮
                                  return '<button class="btn btn-default btn-xs" onclick="previewPDF(\'' +ctx+ value + '\')">' +
                                         '<i class="fa fa-eye"></i> 预览PDF' +
                                         '</button>' +
                                         '<a href="' + ctx+value + '" download class="btn btn-default btn-xs" style="margin-left: 5px;">' +
                                         '<i class="fa fa-download"></i> 下载' +
                                         '</a>';
                              } else {
                                  // 其他文件，只提供下载
                                  return '<a href="' + ctx+value + '" download class="btn btn-default btn-xs">' +
                                         '<i class="fa fa-download"></i> 下载' +
                                         '</a>';
                              }
                          }
                      },
                      {
                          field: 'category',
                          title: '分类'
                      },
                      {
                          field: 'description',
                          title: '书籍描述'
                      },
                      {
                          field: 'readCount',
                          title: '阅读次数'
                      },
                      {
                          field: 'qrCodeUrl',
                          title: '二维码图片URL',
                          formatter: function(value, row, index) {
                              // return $.table.imageView(value);
                              return '<div id="' + row.id + '" class="qrcode" data-url="' + row.bookUrl + '"></div>';
                          }
                      },
                      {
                          field: 'status',
                          title: '状态',
                          formatter:function (value){
                              if (value==1){
                                  return '<span class="label-success">启用</span>'
                              }else{
                                  return '<span class="label-danger">禁用</span>'

                              }
                          }
                      },
                      {
                          title: '操作',
                          align: 'center',
                          formatter: function(value, row, index) {
                              var actions = [];
                              actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                              actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                              return actions.join('');
                          }
                      }]
                  };
                  $.table.init(options);
              });

              // 预览PDF文件
              function previewPDF(url) {
                  // 使用layer弹窗显示PDF预览
                  layer.open({
                      type: 2,
                      title: 'PDF预览',
                      shadeClose: true,
                      shade: 0.8,
                      area: ['90%', '90%'],
                      content: url,
                      maxmin: true,
                      btn: ['下载文件', '关闭'],
                      yes: function(index, layero) {
                          // 点击下载按钮
                          window.open(url, '_blank');
                      }
                  });
              }

              function initQrcode() {
                  // 为每个列表行生成二维码
                  $(".qrcode").each(function(index, element) {
                      // 获取需要生成二维码的数据（假设从data-id属性获取）
                      var qrcodeData = $(element).data("url");
                      if (qrcodeData) {
                          // 生成二维码
                          $(element).qrcode({
                              render: "canvas", // 渲染方式：canvas或table
                              width: 80,       // 二维码宽度
                              height: 80,      // 二维码高度
                              text: qrcodeData // 二维码内容
                          });
      <!--                    $(element).click(function() {-->
      <!--                        layer.open({-->
      <!--                            type: 1,-->
      <!--                            title: false,-->
      <!--                            closeBtn: 0,-->
      <!--                            area: ['300px', '300px'],-->
      <!--                            skin: 'layui-layer-nobg', //没有背景色-->
      <!--                            shadeClose: true,-->
      <!--                            content: $(element)-->
      <!--                        });-->
      <!--                    });-->
                      }
                  });
              }
    </script>
  </body>
</html>
